// 运营模块附件上传弹窗
<template>
  <el-dialog title="附件" :visible.sync="uploadVisible" custom-class="uploadDialog" append-to-body @open="init" :close-on-click-modal="false">
    <div class="dialogWrap">
      <div class="uploadHeader">
        <div class="search">
          <el-input placeholder="请输入文件名称查询" v-model="searchVlue">
            <template slot="append">
              <el-button type="primary" size="mini" icon="el-icon-search">搜索</el-button>
            </template>
          </el-input>
        </div>
        <div class="menu">
          <el-button size="small" type="primary" icon="el-icon-arrow-left" @click="goBack">返回上级</el-button>
          <el-button size="small" type="primary" icon="el-icon-folder-add" @click="$message.error('请先选择文件分类')" v-if="fileType < 0">上传文件</el-button>
          <el-upload
            class="uploadBox"
            action="/admin/sys-file/upLodeFileAdd"
            :on-change="handleUploadChange"
            :file-list="fileList"
            :show-file-list="false"
            :auto-upload="false"
            multiple
            :limit="9"
            v-else
          >
            <el-button size="small" type="primary" icon="el-icon-folder-add">上传文件</el-button>
          </el-upload>
        </div>
      </div>
      <!-- 统计表格 -->
      <el-table class="flowTable" :data="totalData" @row-click="openDetails" v-if="fileType < 0">
        <el-table-column label="名称" prop="typeName" header-align="center">
          <template slot-scope="scope">
            <i class="el-icon-folder-opened"></i>
            <span style="margin-left: 10px">{{ scope.row.typeName }}</span>
          </template>
        </el-table-column>
        <el-table-column label="目录(文档数量)" width="200" prop="total" align="center" />
        <el-table-column label="更新时间" width="160" sortable prop="updateTime" align="center" />
      </el-table>
      <!-- 文件列表 -->
      <el-table class="flowTable" :data="totalFiles" max-height="500" v-else>
        <el-table-column label="名称" prop="typeName" header-align="center">
          <template slot-scope="scope">
            <i class="el-icon-folder-opened"></i>
            <span style="margin-left: 10px">{{ scope.row.typeName }}</span>
          </template>
        </el-table-column>
        <el-table-column label="更新时间" width="160" sortable prop="updateTime" align="center" />
        <el-table-column label="操作" width="200" align="center">
          <template slot-scope="scope">
            <el-button type="text" :style="{'--color':'#666666'}" size="mini" @click="handleBtnClick('preview',scope.row)">查看</el-button>
            <el-button type="text" :style="{'--color':'#E6A23C'}" size="mini" @click="handleBtnClick('delete',scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>

      <div class="dialogFooter">
        <el-button type="default" @click="hide">关闭</el-button>
        <el-button type="primary" v-if="saveUpload">保存</el-button>
      </div>
    </div>
  </el-dialog>
</template>

<script>
import { getFiles, delFiles, checkFiles } from '@/api/operate-construction-contract'
export default {
  props: {
    // 绑定业务id
    busId: {
      type: [String, Number],
      default: ''
    },
    // 模块名称
    modeType: {
      type: String,
      default: true,
    },
  },
  data () {
    return {
      // 当前显示的文件表格[统计表格为-1]
      fileType: -1,
      // 弹窗显隐控制器
      uploadVisible: false,
      // 附件统计表格
      totalData: [
        { typeId: 0, typeName: '照片', total: 0, updateTime: '' },
        { typeId: 1, typeName: '图纸', total: 0, updateTime: '' },
        { typeId: 3, typeName: '资料', total: 0, updateTime: '' },
        { typeId: 4, typeName: '音视频', total: 0, updateTime: '' },
        { typeId: 5, typeName: '其他', total: 0, updateTime: '' },
      ],
      // 文件列表
      files: [
        { typeName: '文件1', updateTime: '' },
      ],
      // 搜索关键词
      searchVlue: '',
      // 上传文件列表
      fileList: [],
    }
  },
  computed: {
    // 上传文件列表
    totalFiles () {
      let uploadFiles = this.fileList.map(item => {
        return {
          typeName: item.name,
          file: item.raw,
          size: item.size,
          isVirtual: true
        }
      })
      return this.files.concat(uploadFiles)
    }
  },
  methods: {
    //初始化
    async init () {
      if (!this.busId || !this.modelType) return;
      const res = await getFiles(this.busId, this.modelType)
      this.loadFileList = res.data.data;
    },
    // 上传文件监听
    handleUploadChange (file, fileList) {
      console.log(file)
      this.fileList.push(file)
    },
    // 保存上传文件
    saveUpload () {
      //...
    },
    // 上传文件预览&删除
    handleBtnClick (data) {
      console.log(data)
    },
    // 行点击事件
    openDetails (data) {
      this.fileType = data.typeId
    },
    // 显示弹窗
    show (data = {}) {
      this.uploadVisible = true
    },
    // 返回上一页
    goBack () {
      if (this.fileType == -1) {
        this.$message.error('没有上一页了')
      } else {
        if (this.files.length) {
          this.$confirm('您还有文件未保存，是否确定返回?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            this.fileList.length = 0
            this.fileType = -1
          });
        } else {
          this.fileType = -1
        }
      }
    },
    // 隐藏弹窗
    hide () {
      this.uploadVisible = false
      this.fileType = -1
      this.fileList.length = 0
    }
  },
}
</script>

<style lang="scss" scoped>
/deep/ .flowTable {
  th,
  td {
    padding: 8px 0;
  }
}
.uploadDialog {
  .uploadHeader {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    .uploadBox {
      display: inline-block;
      margin-left: 10px;
    }
    .search {
      width: 250px;
      /deep/ .el-input .el-input__inner {
        border: 1px solid #dcdfe6;
        height: 32px;
        line-height: 32px;
      }
    }
  }
  .dialogFooter {
    margin-top: 20px;
    text-align: right;
  }
}
</style>